<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="" media="screen" />
		<link rel="stylesheet" type="text/css" href="" media="print" />
		<!--媒体查询示例-->
		<style type="text/css">
			h1 {
				color: lightblue;
				text-align: center;
			}
			
			p {
				font-family: sans-serif;
				font-size: 16px;
				text-indent: 2em;
				color: deepskyblue;
			}
			
			@media only print {
				h1 {
					color: black;
					text-align: center;
				}
				p,span {
					font-family: sans-serif;
					font-size: 16px;
					text-indent: 2em;
					color: gainsboro !important;
				}
			}
		</style>
	</head>

	<body>
		<h1>Title</h1>
		<section>
			<p>演示通过媒体查询让屏幕和打印<span style="color: red;">(ctrl+p)</span>显示不同的样式</p>
			<p>Content shgsd dsglsha dshgsld odsh sdhgls dshlsh sdlhg , dslgh ,sdag asdgsld , <br />dsjlhjshlsh sdlhg , dslgh ,sdag asdgsld , dsjlhj</p>
			<p>Content shgsd dsglsha dshgsld odsh sdhgls dshlsh sdlhg , dslgh ,sdag asdgsld , dsj <br /> lhjbrshlsh sdlhg , dslgh ,sdag asdgsld , dsjlhj</p>
			<p>Content shgsd dsglsha dshgsld odsh sdhgls dshlsh sdlhg , dslgh ,sdag asdgsld , dsjlhjs <br /> hlsh sdlhg , dslgh ,sdag asdgsld , dsjlhj</p>
		</section>
	</body>

</html>